<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>我的生活</title>
    <meta name="viewport" content="initial-scale=1, maximum-scale=1">
    <link rel="shortcut icon" href="/favicon.ico">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">

    <link rel="stylesheet" href="//g.alicdn.com/msui/sm/0.6.2/css/sm.min.css">
    <link rel="stylesheet" href="//g.alicdn.com/msui/sm/0.6.2/css/sm-extend.min.css">
    <style type="text/css">
        .font-hidden {
            display: -webkit-box;
            overflow: hidden;
            width: 100%;
            text-align: left;
            text-overflow: ellipsis;
            -webkit-line-clamp: 3;
            -webkit-box-orient: vertical;
        }
    </style>
</head>
<body>
<div class="page-group">
    <div id="page-ptr" class="page">
        <header class="bar bar-nav" style="height: 250px;background-color: white">
            <img style="width: 100%; height: auto;" src="../resource/hotui/img/reporter_logo.jpeg">
            <div class="searchbar row" style="background-color: white">
                <div class="search-input col-80">
                    <label class="icon icon-search" for="search"></label>
                    <input th:value="${condition.keyword}" type="search" id="search" placeholder="输入小记者姓名/证号查询投稿情况...">
                </div>
                <a style="top: 0px;" onclick="mySearch()" class="button button-fill button-primary col-20">搜索</a>
            </div>
        </header>
        <div class="content pull-to-refresh-content" style="top:250px">
            <!-- 正文 -->
            <div class="card-container">
                <div onclick="goDetail(1)" th:onclick="|goDetail(${contribution.id})|" class="card" th:each="contribution:${contributions}">
                    <div valign="bottom" class="card-header color-white no-border" th:text="${contribution.title}">旅途的山</div>
                    <div class="card-content">
                        <div class="card-content-inner">
                            <p class="color-gray"><span th:text="${contribution.reporterName}"></span> 发表于 <span th:text="${contribution.createTimeFormat}"></span></p>
                            <p style="display: -webkit-box;overflow: hidden;width: 100%;text-align: left; text-overflow: ellipsis;-webkit-line-clamp: 3;-webkit-box-orient: vertical;"
                               th:text="${contribution.content}">slk代价飞历史地看姐发科技时代来看积分流口水简单来看放家里考试的林凤娇SD离开家付了款SD就离开废旧塑料看DJ风流狂少的就快了房间SD开了家风流教师都理解付了款圣诞节快乐发历史课的姐联发科结舌杜口了分开了稍等就快了房间莱克斯顿解放路看</p>
                        </div>
                    </div>
                    <div class="card-footer">
                        <a href="#" class="link"></a>
                        <a href="" th:href="@{/fDetail(id=${contribution.id})}" class="link">详情</a>
                    </div>
                </div>
            </div>
            <div class="content-block">
                <div class="row">
                    <div class="col-50"><a href="javascript:prePage()" class="button button-big button-fill button-success">上一页</a></div>
                    <div class="col-50"><a href="javascript:nextPage()" class="button button-big button-fill button-success">下一页</a></div>
                </div>
            </div>
        </div>
    </div>

</div>
<script type='text/javascript' src='//g.alicdn.com/sj/lib/zepto/zepto.min.js' charset='utf-8'></script>
<script type='text/javascript' src='//g.alicdn.com/msui/sm/0.6.2/js/sm.min.js' charset='utf-8'></script>
<script type='text/javascript' src='//g.alicdn.com/msui/sm/0.6.2/js/sm-extend.min.js' charset='utf-8'></script>
<script type="text/javascript" th:inline="javascript">
    var totalPages = /*[[${totalPages}]]*/ 1;
    var pageIndex = /*[[${pageIndex}]]*/ 1;
    var currentPage = /*[[@{/fList}]]*/ 1;
    var detailPage = /*[[@{/fDetail}]]*/ 1;
</script>
<script type="text/javascript">
    function goDetail(contributionId) {
        window.location.href = detailPage + "?id=" + contributionId;
    }

    function prePage() {
        if (pageIndex <= 1) {
            return;
        } else {
            pageIndex = pageIndex - 1;
            window.location.href = currentPage + "?pageIndex=" + pageIndex + "&keyword=" + $("#search").val();
        }
    }

    function nextPage() {
        if (pageIndex == totalPages) {
            return;
        } else {
            pageIndex = pageIndex + 1;
            window.location.href = currentPage + "?pageIndex=" + pageIndex + "&keyword=" + $("#search").val();
        }
    }

    function mySearch() {
        window.location.href = currentPage + "?keyword=" + $("#search").val();
    }

    $(function () {
        'use strict';

        // $(".content").css("top", $("header").height() + "px");

        $(document).on("pageInit", "#page-ptr", function (e, id, page) {
            var $content = $(page).find(".content").on('refresh', function (e) {
                setTimeout(function () {
                    window.location.reload();
                    $.pullToRefreshDone($content);
                }, 300);
            });
        });

        // $(document).on("pageInit", "#page-ptr", function (e, id, page) {
        //     var loading = false;
        //
        //     function addItem() {
        //         $.ajax({
        //             type: "post",
        //             url: "",
        //             data: {
        //                 pageIndex: pageIndex,
        //                 keyword: $("#search").val()
        //             },
        //             dataType: 'json',
        //             success: function (data) {
        //                 var html = "";
        //                 $.each(data.contributions, function (o, item) {
        //                     var tempHtml = $("#card_template").html();
        //                     tempHtml = tempHtml.replace("{title}", item.title);
        //                     tempHtml = tempHtml.replace("{reporterName}", item.reporterName);
        //                     tempHtml = tempHtml.replace("{createTime}", item.createTimeFormat);
        //                     tempHtml = tempHtml.replace("{content}", item.content);
        //
        //                     html += tempHtml;
        //                 });
        //
        //                 $(".card-container").append(html);
        //                 loading = false;
        //                 $.refreshScroller();
        //             },
        //             error: function () {
        //             }
        //         })
        //     }
        //
        //     $(page).on('infinite', function () {
        //         if (loading) return;
        //         loading = true;
        //         pageIndex += 1;
        //         if (pageIndex >= totalPages) {
        //             $.detachInfiniteScroll($('.infinite-scroll'));
        //             $('.infinite-scroll-preloader').remove();
        //             return;
        //         }
        //         setTimeout(function () {
        //             alert(1);
        //             addItem();
        //         }, 300);
        //     });
        // });
    });
</script>
</body>
</html>